<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">校外老师注册</view>
				<view class="right">
				</view>
			</view>
		</view>
		<view class="">
			<view class="region1">
				<view class="">地区</view>
				<picker mode="region" class="inp" @change="addRessChoose">
					<input type="text" class="inp" placeholder="选择地区" :value="addRess"/>
				</picker>
			</view>
			<view class="region1">
				<view class="">机构名称</view>
				<picker @change="schoolChange" :range="orgName">
					<input type="text" class="inp" placeholder="选择机构" :value="orgName[index1]" />
				</picker>
			</view>
			<view class="region1">
				<view class="p2">姓名</view>
				<input type="text" class="inp" @input='inputName' placeholder="姓名" :value="regAdd.teacherName" />
			</view>

			<view class="region1">
				<view class="p2">性别</view>
				<radio-group class="gro" @change="sexChange">
					<label class="rad">
						<radio value="1" color="#49F1DE" /><text>男</text>
					</label>
					<label class="rad">
						<radio value="2" color="#49F1DE" /><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="region1">
				<view class="p2">身份证号</view>
				<input type="text" class="inp" @input='inputID' :value="regAdd.idCard" />
			</view>
			<view class="region1">
				<view class="p2">学历</view>
				<picker @change="educationChange" :range="eduBack">
					<input type="text" class="inp" placeholder="选择学历" :value="regAdd.eduBackground" />
				</picker>
			</view>
			<view class="region1">
				<view class="p2">职称</view>
				<picker @change="positionChange" :range="positionData">
					<input type="text" class="inp" placeholder="选择职称" :value="regAdd.position" />
				</picker>
			</view>
			<view class="region1">
				<view class="p2">证书编号</view>
				<input type="text" class="inp" @input='inputCertificate' :value="regAdd.positionCertificate" />
			</view>
			<view class="region2">
				<view class="p2">证书图片</view>
				<image v-if='show1' :src="regAdd.positionCertificatePic"  class="img4"  mode=""></image>
				<button v-if="hide1" @click="zhiChengImg" class="img3">
					<text >＋</text>
				</button>
			</view>
			<view class="region1">
				<view class="p2">资格认证</view>
				<picker @change="qualificationsChange" :range="teacherQualificationData">
					<input type="text" class="inp" placeholder="选择资格" :value="regAdd.teacherQualification" />
				</picker>
			</view>
			<view class="region1">
				<view class="p2">证书编号</view>
				<input type="text" class="inp" @input='inputQualificationNum'  :value="regAdd.teacherQualificationNum">
			</view>
			<view class="region2">
				<view class="p2">证书图片</view>
				<image v-if='show' :src="regAdd.teacherQualificationPic" class="img4" mode=""></image>
				<button v-if='hide' @click="ziGeImg" class="img3">
					<text>＋</text>
				</button>
			</view>
			<view class="region2">
				<view class="p2" style="margin-bottom: 30rpx;">教学经历/成果</view>
				<textarea :value="regAdd.eduResult" @input='textEduResult' placeholder="请输入......" />
				</view>
		
		<button @click="goRegConfirm"  class="ok" hover-class="button-hover">提交审核</button>
	</view>
	</view>
</template>
<script scoped>
	export default {
		data() {
			return {	
				show1:false,
				hide1:true,
				show:false,
				hide:true,
				orgName:[],//机构数组
				TorgId:[],//机构id
				addRess:'',//机构所属地区
				school:'',//所属机构	
				eduBack:['本科','研究生','博士','博士后'],
				positionData:['高级教师','助理','副教授','教授'],
				teacherQualificationData:['小学教师','中学教师','大学教师'],
				regAdd:{
					teacherName:'',//姓名***8
					teacherSex:'',//性别12
					idCard:'',//身份证号****3
					eduResult:'',//工作历史****2
					mobile: '',//电话4
					eduBackground:'',//学历1
					position:'',//职称5
					positionCertificate:'',//职称证书编号****6
					positionCertificatePic:'',//职称证书图片	7			
					teacherQualification:'',//资格认证9
					teacherQualificationNum:'',//教师资格认证编号*****10
					teacherQualificationPic:'',//教师资格认证图片11
					torgId:'',
				},
				index1:'',
				index2:'',
				index3:'',
				index4:'',
				
				 // 状态栏高度
				 statusBarHeight: 0,
				 // 导航栏高度
				 navBarHeight: 82 + 11,
			}
		}, 
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			goBack(){
				// 此处是写返回页面的方法、						
				uni.navigateBack({
					delta: 1//返回只上一级页面
				});
			},
			//获取姓名
			inputName(e){
				this.regAdd.teacherName=e.detail.value
			},
			//获取身份证的值
			inputID(e){
				this.regAdd.idCard=e.detail.value
			},
			//获取职称证书编号
			inputCertificate(e){
				this.regAdd.positionCertificate=e.detail.value
			},
			//获取教师资格认证编号
			inputQualificationNum(e){
				this.regAdd.teacherQualificationNum=e.detail.value
			},
			//获取教学历史
			textEduResult(e){
				this.regAdd.eduResult=e.detail.value
			},
			// 提交审核-进入资料审核页
			goRegConfirm(){
				this.$myRequest({
					url: '/teacher/register',
					method:'post',
					data:{
						teacher:this.regAdd
					},
					success: (res) => {
						console.log(this.regAdd)
						uni.navigateTo({
							url:'./outTeachRegVerify?idCard= '+ this.regAdd.idCard+''
						})
					},
					fail: (err) => {
						console.log(err)
						console.log('获取数据中')
				
					}
				})
				
			},
			//选择地址返机构
			addRessChoose:function(e) {
							var arr = e.target.value
							this.addRess=arr
							this.$myRequest({
								url:'/teacher/queryOrgs',
								method:'post',
								data:{
									areaArr:arr
								},
								success:(res)=>{
									console.log(res)
									this.orgName=[];
									this.TorgId=[];
									if(res.data.data.length==0){
										this.orgName.push("该地区没有机构")
									}else{
										for(var i=0;i<res.data.data.length;i++){
											this.orgName.push(res.data.data[i].organizationName);
											this.TorgId.push(res.data.data[i].id);
											console.log(this.TorgId)
										}
									}
								}
							})
						},
			
			//下拉框
			mechanismChange: function(e) {		

			this.index = e.target.value			
			this.jg=this.mechanism[this.index]		
			},
			//选择机构
			schoolChange: function(e) {
				this.index1 = e.target.value			
				this.regAdd.torgId=this.TorgId[this.index1]
			},
			//选择学历
			educationChange: function(e) {
			this.index2 = e.target.value	
			this.regAdd.eduBackground=this.eduBack[this.index2]	
			},
			//选择职称
			positionChange: function(e) {
				this.index3 = e.target.value			
				this.regAdd.position=this.positionData[this.index3]	
			},
			//选择性别
			sexChange: function(e) {
				if(e.target.value==1){
					this.regAdd.teacherSex='男'
				}else{
					this.regAdd.teacherSex='女'
				}
			},
			//选择资格认证
			qualificationsChange: function(e) {
			this.index4 = e.target.value			
			this.regAdd.teacherQualification=this.teacherQualificationData[this.index4]		
			},
			// //职称图片
			zhiChengImg(){
				uni.chooseImage({
					count:6, 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], 
					success:  (res)=> {
						this.regAdd.positionCertificatePic=res.tempFilePaths;
						this.show1=true;
						this.hide1=false;
						console.log(JSON.stringify(this.regAdd.positionCertificatePic));
					}
				});
			},
			ziGeImg(){
				uni.chooseImage({
					count:6, 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], 
					success:  (res)=> {
						this.regAdd.teacherQualificationPic=res.tempFilePaths;
						this.show=true;
						this.hide=false;
						console.log(JSON.stringify(this.regAdd.teacherQualificationPic));
					}
				});
			}
			
		},

	}
</script>

<style>
	.navBarBox .navBar {
			padding: 3rpx 50rpx;
			padding-bottom: 8rpx;
			display: flex;
			justify-content: space-between;
	
			line-height: 93rpx;
			font-size: 40rpx;
		}
	
		.goback {
			flex: 1;
			height: 100%;
		}
		.goicon{
			width: 30rpx;
			height: 30rpx;
			background-color: #00BEA9;
			margin-top: 30rpx;
		}
		.title {
			flex: 2;
			height: 100%;
			
		}
		.right{
			flex: 1;
		}
		.p2{
			font-size: 32rpx;
		}
	.region1{
		margin-top: 16rpx;
		margin-left: 40rpx;
		height: 126rpx;
		border-bottom: #E1E1E1 solid 1px;
	}
	.region2{
		margin-top: 16rpx;
		margin-left: 40rpx;
		border-bottom: #E1E1E1 solid 1px;
	}
	.inp{
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #C8C7CC;
	}
		
	.rad{
		margin-left: 180rpx;
	}
	.region2 image{
		width: 200rpx;
		height: 200rpx; 
		background-size: cover;
	}
	
	.img3{
		width: 200rpx;
		height: 200rpx; 
		border: 1px dashed #eeeeee;
		background: #fff;
		margin-bottom: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.img4{
		margin-left:200rpx ;
		width: 200rpx;
		height: 200rpx; 
		margin-bottom: 46rpx;
	}
	.gro{
		margin-bottom: 50rpx;
	}
	textarea{
		width: 680rpx;
		height: 180rpx;
		border: #E1E1E1 1px solid;
	}
     .ok{
		 margin-top: 50rpx;
		 margin-bottom: 50rpx;
		 width: 230rpx;
		 height: 70rpx;
		 line-height: 70rpx;
		 font-size: 30rpx;
		 color: #fff;
		 background-color:#2FB3FE;
	 }
	 .button-hover {
	 	color: #fff;
	 	background-color: #118ace;
	}
</style>

